<template>
	<!-- 主站图标，根据路由显示不同风格 -->
	<div class="nav-item" is="li" @mouseover="hover('stand', true)" @mouseleave="hover('stand', false)" ref="stand">
		 <template v-if="home">
			<router-link to="/">
				<span class="bl-logo"><Icon type="logo"></Icon></span>
				<span class="logo-text">主站</span>
			</router-link>
		</template>
		<template v-else>
			<router-link to="/">
				<span class="bili-logo"><Icon type="bili"></Icon></span>
				<span class="bili-text">主站</span>
				<span class="down"><Icon type="arrowDown"></Icon></span>
			</router-link>
		</template>
	</div>
</template>

<script>
export default{
	computed:{
		// 获取当前路由是否为主页，主页显示不同风格图标
		home(){
			return this.$route.fullPath == '/' || this.$route.fullPath == '/home'
		}
	},
	methods:{
		// 移入显示浮窗移出隐藏
		hover(name, show){
			this.$store.commit('pops/setPopsShow', {name, show})
		},
		// 根据元素设置起始位置
		getPosi(name){
			let target = this.$refs[name];
			this.$store.commit('pops/getComputedPosi', {name, target})
		}
	},
	mounted(){
		this.getPosi('stand');
	}
}
</script>

<style lang="less" scoped>
.nav-item{
	a{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		line-height: 100%;
		.bl-logo{
			font-size: 18px;
		}
		.logo-text{
			margin-left: 6px;
			font-size: 14px;
		}
		.bili-logo{
			width: 70px;
			height: 100%;
			color: #00a1d6;
			font-size: 32px;
		}
		.bili-text{
			margin-left: 16px;
			font-size: 14px;
		}
		.down{
			font-size: 16px;
		}
	}
}
</style>
